<template>
	<view class="main">
		<!-- <scroll-view class="letter-scroll" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true" :style="{height:clientHeight+'px'}"> -->
		<!-- 头部固定搜索 -->
		<view class="header-search">
			<!-- 左边icon -->
			<view class="flex1 mb15" @click="tocity()">
				<view class="icon"><image class="icon-position" src="../static/assets/index/icon-position.png"></image></view>
				<text class="eclips">{{ city }}</text>
			</view>
			<!-- 右边搜索 -->
			<view class="flex2 mb15">
				<view class="search-icon"><image src="../static/assets/index/icon-serch.png"></image></view>
				<input @confirm="confirm" class="search-input" confirm-type="search" v-model="searchVal" type="text" placeholder="输入车辆的名称或品牌" />
			</view>
		</view>

		<!-- banner -->
		<view class="banner">
			<swiper indicator-dots="true" indicator-color="rgba(255,255,255,1)" indicator-active-color="#E41805" autoplay="true" interval="3000">
				<swiper-item v-for="(item, index) in bannerList" :key="index"><image lazy-load="true" :src="item.image" @click="swiperLink(item)"></image></swiper-item>
			</swiper>
		</view>

		<!-- 推荐品牌 -->
		<view class="brand">
			<scroll-view scroll-x="true">
				<swiper class="brand-car-list" display-multiple-items="4.5">
					<swiper-item v-for="(item, key) in carType" class="brand-car" @click="toBrand(item.id, item.name)" :data-id="item.id" :data-name="item.name" :key="key">
						<view class="icon-main"><image lazy-load="true" class="icon-logo" mode="aspectFit" :src="item.logo_image"></image></view>
						<text>{{ item.name }}</text>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="recommend">
			<view class="recommend-title">热门车系</view>
			<view class="recommend-car-list">
				<view @click="toCarDetail(item.id)" :data-id="item.id" class="single-car" v-for="(item, index) in like" :key="index">
					<view class="single-car-img"><image mode="aspectFill" :src="item.image"></image></view>
					<view class="words u-line-2">{{ item.name }}</view>
				</view>
			</view>
		</view>

		<!-- 网约车 -->
		<view class="recommend" v-if="net.length > 0">
			<view class="recommend-title">网约车</view>
			<view class="recommend-car-list">
				<view @click="toSingle(item)" :data-id="item.id" class="single-car" v-for="(item, index) in net" :key="index">
					<view class="single-car-img"><image mode="aspectFill" :src="item.image"></image></view>
					<view class="words u-line-2">{{ item.name }}</view>
				</view>
			</view>
		</view>
		<!-- 特价车 -->
		<view class="recommend" v-if="staging.length > 0">
			<view class="recommend-title">分期车</view>
			<view class="recommend-car-list">
				<view @click="toSingle(item,'staging')" :data-id="item.id" class="single-car" v-for="(item, index) in staging" :key="index">
					<view class="single-car-img"><image mode="aspectFill" :src="item.image"></image></view>
					<view class="words u-line-1">{{ item.name }}</view>
					<view class="" style="text-align: left;" > <text style="font-size: 20rpx;margin-right: 8rpx;">首付</text><text style="font-size: 30rpx;color: orange;">￥{{item.first}}</text > </view>
<!-- 					<view class=""style="text-align: left; color: orange; font-size: 28rpx;"><text style="font-size: 30rpx;">{{item.month}}</text> 月供</view> -->
					<!-- <view class="first"> {{item.first}}丨月供 {{item.month}}</view> -->
				</view>
			</view>
		</view>
		
		<!-- 字母查找 -->
		<!-- <view :id="index" class="scroll-view-item" v-for="(item,index) in scrollBrand" :key="index">
				<view class="letter-title">{{index}}</view>
				<view class="letter-record" v-for="(list, cindex) in item" @click="toBrand(list.id,list.name)" :data-id="list.id"
				 :data-name="list.name" :key="cindex">
					<view class="letter-img">
						<image mode="aspectFit" lazy-load="true" class="icon-logo-list" :src="list.logo_image"></image>
					</view>
					<view class="letter-name">{{list.name}}</view>
				</view>
			</view> -->

		<u-index-list :scrollTop="scrollTop" :index-list="indexList" :activeColor="'#E41805'">
			<view class="scroll-view-item" v-for="(item, index) in scrollBrand" :key="index">
				<u-index-anchor :index="index" />
				<view
					class="letter-record u-border-bottom"
					v-for="(list, cindex) in item"
					@click="toBrand(list.id, list.name)"
					:data-id="list.id"
					:data-name="list.name"
					:key="cindex"
				>
					<view class="letter-img"><image mode="aspectFit" lazy-load="true" class="icon-logo-list" :src="list.logo_image"></image></view>
					<view class="letter-name">{{ list.name }}</view>
				</view>
			</view>
		</u-index-list>
		<!-- </scroll-view> -->
		<!-- 字母导航 -->
		<!-- 	<view class="navigation-bars">
			<view class="navigation-bars-initial" :class="letterActive==item?'active':''" v-for="(item,index) in initial" @click="goToNode(item)" :key="index">
				{{item}}
			</view>
		</view> -->
		<homeTabBar :showstatus="showstatus"/>
	</view>
</template>

<script>
import { index, brandlist, search } from '../apis/new-car/index.js';
import homeTabBar from './home-tab-bar/index.vue';
export default {
	data() {
		return {
			searchVal: '',
			city: '成都',
			bannerList: [], //banner图片
			carType: [],
			like: [], //猜你喜欢
			// initial: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'], //字母导航
			scrollBrand: [], //品牌列表
			// toView: '', //跳转id
			letterActive: '', //字母选中状态
			params: {},
			ifOnShow: false,
			net: [], // 网约车
			staging:[], // 特价车
			clientHeight: 0,
			scrollTop: 0,
			indexList: [],
			showstatus:0
		};
	},
	components: {
		homeTabBar
	},
	onLoad() {
		let _self = this;
		// _self.getIndex();
		_self.brandList();
		uni.getStorage({
			key: 'position',
			success(e) {
				_self.city = e.data;
			}
		});
		uni.getSystemInfo({
			success: function(res) {
				let height = res.windowHeight - 83;
				_self.clientHeight = height;
			}
		});
	},
	onHide() {
		this.ifOnShow = true;
	},
	onShow() {
		let _self = this;
		_self.showstatus=uni.getStorageSync('showSataus');
		_self.getIndex();
		if (this.ifOnShow) {
			uni.getStorage({
				key: 'position',
				success(e) {
					_self.city = e.data;
				}
			});
		}
		this.$store.dispatch('home-tab-bar/setCurrentTabbar', 1);
	},
	methods: {
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		/* */
		tocity() {
			uni.navigateTo({
				url: 'new-car/component/city-model/city?type=3'
			});
		},
		/**
		 * 去到对应的节点
		 */
		// goToNode: function(val) {
		// 	let that = this;
		// 	var hash = val;
		// 	that.toView = hash;
		// 	that.letterActive = hash;
		// },
		/*网约车*/
		tocheap() {
			uni.navigateTo({
				url: 'new-car/list/cheap/cheap'
			});
		},
		/*去品牌页*/
		toBrand(id, name, type) {
			if ((type = 'net')) {
				uni.navigateTo({
					url: 'new-car/list/brand/brand?brand_id=' + id + '&name=' + name
				});
			} else {
				uni.navigateTo({
					url: 'new-car/list/brand/brand?brand_id=' + id + '&name=' + name
				});
			}
		},
		/*去车系页*/
		toCarDetail(id) {
			uni.navigateTo({
				url: 'new-car/detail/carDetail/carDetail?v_id=' + id + '&city=' + this.city
			});
		},
		/**单个车型明细*/
		toSingle({id,first,month,month_nums},detailType) {
			uni.navigateTo({
				url:`new-car/detail/carSingle/carSingle?cid=${id}&first=${first}&month=${month}&month_nums=${month_nums}&detailType=${detailType}`
			});
		},
		/*搜索框*/
		confirm() {
			let _self = this,
				params = {};
			params.search = _self.searchVal;
			search(params)
				.then(res => {
					if (res.code == 2001) {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						});
					} else if (res.code == 1) {
						let url,
							id = res.data.id;
						if (res.data.action == 'brandVList') {
							url = 'new-car/list/brand/brand?brand_id=';
						} else {
							url = 'new-car/detail/carDetail/carDetail?city=' + _self.city + '&v_id=';
						}
						uni.navigateTo({
							url: url + id
						});
					}
				})
				.catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
		},
		/*品牌列表数据*/
		brandList() {
			let _self = this;
			brandlist()
				.then(res => {
					_self.scrollBrand = res.data.brand || [];
					_self.indexList = Object.keys(res.data.brand) || [];
				})
				.catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
		},
		/*首页数据*/
		getIndex: function() {
			let _self = this;
			index({
				city: _self.city
			})
				.then(res => {
					_self.bannerList = res.data.ad;
					_self.carType = res.data.index_brand;
					_self.like = res.data.like;
					_self.net = res.data.net;
					_self.staging = res.data.staging;
				})
				.catch(err => {
					uni.showToast({
						title: err,
						icon: 'none'
					});
				});
		},
		// 点击轮播跳转
		swiperLink: function(item) {
			if (item.type == 2 && item.car_id) {
				uni.navigateTo({
					url: `/pages/new-car/detail/carSingle/carSingle?cid=${item.car_id}`
				});
			}
		}
	}
};
</script>

<style scoped lang="less">
.main {
	// height: 100vh;
	padding-bottom: 185rpx;

	// overflow-y: auto;
	.header-search {
		width: 100%;
		height: 88rpx;
		background-color: #e41805;
		position: relative;
		top: 0;
		left: 0;
		display: flex;
		align-items: flex-end;
		justify-items: center;
		z-index: 99;
	}

	.words {
		word-break: break-all;
		font-size: 24rpx;
		margin-top: 12rpx;
		text-align: left;
	}
	.first{
		text-align: left;
		color: #fc830c;
		font-size: 18rpx;
		font-weight: bold;
	}
	.flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.flexright {
		color: #999;
		font-weight: normal;
		font-size: 24rpx;
	}

	.iconrigth {
		font-size: 20rpx;
		margin-left: 16rpx;
	}

	.flex1 {
		text-align: center;
		color: #fff;
		width: 95rpx;
		height: 64rpx;
		font-size: 20rpx;
	}

	.eclips {
		display: inline-block;
		width: 60rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mb15 {
		margin: 0 0 15rpx;
	}

	.icon {
		display: block;
	}

	.icon-position {
		width: 24rpx;
		margin: 0 0 6rpx;
		height: 30rpx;
	}

	.flex2 {
		flex: 2;
		margin: 0 30rpx 15rpx 15rpx;
		height: 64rpx;
		width: 100%;
		background: #fff;
		font-size: 28rpx;
		display: flex;
		border-radius: 10rpx;
		align-items: center;
	}

	.search-input {
		display: inline-block;
		height: 64rpx;
		width: 88%;
		padding-left: 16rpx;
		background: transparent;
		outline: none;
		vertical-align: middle;
	}

	.search-icon {
		display: block;
		width: 56rpx;
	}

	.search-icon image {
		width: 30rpx;
		height: 30rpx;
		margin: 18rpx 16rpx 16rpx 25rpx;
	}

	/* banner */
	.banner {
		width: 670rpx;
		height: 345rpx;
		margin: 30rpx 40rpx 0;
		border-radius: 20rpx;
	}

	.banner swiper {
		width: 100%;
		height: 100%;
	}

	.banner image {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
	}

	/* 模块分类 */

	.icon-hot {
		width: 80rpx;
		height: 80rpx;
	}

	.icon-logo {
		width: 150rpx;
		height: 80rpx;
	}

	/* 猜你喜欢 */
	.brand {
		margin: 30rpx 30rpx 0;
		color: #333;
	}

	.brand-car-list {
		background: #fff;
		height: 140rpx;
		display: flex;
		text-align: center;
		justify-content: space-between;
		font-size: 24rpx;
	}

	.brand-car {
		flex: 2;
		margin-right: 10rpx;
	}

	/* 猜你喜欢 */

	.recommend {
		padding: 20rpx 54rpx 30rpx;
		color: #333;
	}

	.recommend-title {
		font-size: 30rpx;
		margin-left: -24rpx;
		font-weight: bold;
	}

	.recommend-car-list {
		display: flex;
		align-content: flex-start;
		text-align: center;
		font-size: 24rpx;
		justify-items: left;
		flex-wrap: wrap;
	}

	.single-car {
		width: 194rpx;
		// height: 182rpx;
		margin-top: 30rpx;
	}

	.single-car-img {
		height: 146rpx;
	}

	.single-car:nth-child(2),
	.single-car:nth-child(5) {
		margin: 30rpx 30rpx 0;
	}

	.single-car-img image {
		width: 194rpx;
		height: 146rpx;
		border-radius: 8rpx;
	}

	/* 字母导航 */
	.navigation-bars {
		z-index: 2;
		position: fixed;
		top: 50%;
		right: 6rpx;
		width: 30rpx;
		transform: translate(0, -55%);
	}

	.navigation-bars-initial {
		display: flex;
		width: 30rpx;
		height: 30rpx;
		justify-content: center;
		align-items: center;
		color: #999;
		margin: 12rpx auto;
		font-size: 24rpx;
		border-radius: 50%;
	}

	.navigation-bars-initial.active {
		background: #e41805;
		color: #fff;
	}

	.letter-scroll {
		position: relative;
		height: 100vh;
		overflow: hidden;
	}

	.scroll-view-item {
		height: auto;
		// padding-top: 80rpx;
	}

	// .scroll-view-item .letter-record:last-child{
	// 	margin-bottom: 0!important;
	// }

	.letter-title {
		background: #f8f8f8;
		color: #969696;
		font-size: 20rpx;
		padding-left: 30rpx;
		margin-bottom: 40rpx;
	}

	.letter-record {
		display: flex;
		height: 65rpx;
		align-items: center;
		padding: 20rpx 0;
	}

	.letter-img {
		margin: 0 50rpx 0 20rpx;
		width: 95rpx;
		height: 65rpx;
		text-align: center;
	}

	.letter-img image {
		width: 100%;
		height: 100%;
	}

	.icon-logo-list {
		width: 96px;
		height: 66rpx;
	}

	.letter-name {
		font-size: 28rpx;
		color: #333;
	}
}
</style>
